<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Seekbars</title>
  <meta name="description" content="Scroll through content (i.e. a song or video) ">

  <link rel="stylesheet" href="../seekbars.css">

  <!--
    This <style> and <link> is only used for the example code, is no needed for the real case use
  -->
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
    }

    body {
      background: #fff;
    }

    h2.bb-docs {
      font-size: 1.8rem;
      font-family: sans-serif;
      font-weight: lighter;
      color: #666;
      margin: -1px 0 0;
      background-color: #f5f5f5;
      padding: 0.4rem 0.4rem 0.4rem 3rem;
      border: solid 1px #e8e8e8;
    }

    body[role="application"] section[role="region"]{
      background: #fff;
      padding: 2rem;
    }

    body[role="application"] section[role="region"] button {
      left: 80%;
    }

    body[role="application"] section[role="region"] label.icon {
      background-image: url();
    }

    body[role="application"] section[role="region"] label.icon:last-of-type {
      background-position: right -3rem;
    }
  </style>

</head>

<body role="application">

  <h2 class="bb-docs">Default seeker</h2>
  <section role="region">
    <div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
      <div>
        <progress value="80" max="100"></progress>
        <button>handler</button>
      </div>
    </div>
  </section>

  <h2 class="bb-docs">Value seeker</h2>
  <section role="region">
    <div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
      <label>0</label>
      <label>100</label>
      <div>
        <progress value="80" max="100"></progress>
        <button>handler</button>
      </div>
    </div>
  </section>

  <h2 class="bb-docs">Icon seeker</h2>
  <section role="region">
    <div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
      <label class="icon">0</label>
      <label class="icon">100</label>
      <div>
        <progress value="80" max="100"></progress>
        <button>handler</button>
      </div>
    </div>
  </section>

</body>
</html>
